<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="..\bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="..\bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="..\bootstrap3\js\bootstrap.min.js">

        </script>

    </head>
    <!--使用方法
    一：在 选项卡（头部标签li） 上  必须有  data-toggle（数据切换，bt内置js处理了），指向 使用  href 或者 data-target来指定访问哪个内容页
    二：使用 js 调用 
       !-->
    <input id="t1" type="hidden" value="">
    <div class="container-fuild">
        <div class="col-md-10">
            <div>
                <ul class="nav nav-tabs" role="tablist">
                    <li><a>标签页</a></li>
                    <li role="presentation" class="active">
                        <a href="#home" role="tab" data-toggle="tab">Home</a>
                    </li>
                    <li role="presentation">
                        <a href="#profile" role="tab" data-toggle="tab">profile</a>
                    </li>
                    <li role="presentation">
                        <a href="#messages" role="tab" id="tab_msg" data-toggle="tab">messages</a>
                    </li>
                    <li role="presentation">
                        <a href="#settings" role="tab" data-toggle="tab">settings</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">首页信息</div>
                    <div role="tabpanel" class="tab-pane fade " id="profile">文件管理</div>
                    <div role="tabpanel" class="tab-pane fade " id="messages">消息管理</div>
                    <div role="tabpanel" class="tab-pane fade " id="settings">设置</div>
                </div>
            </div>
            <button type="button" class="btn btn-default" onclick="changeTab('tab_msg')">选择</button>
        </div>
    </div>


    <!--模态框  !-->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">提示</h3>
                </div>
                <div class="modal-body">
                    <!--模态框中可以使用格栅系统，但是需要在 modal-body中，并且嵌套在 row 类下 !-->
                    <div class="row">
                     
                        <div class="col-md-11">
                            <p id='showmsg'>山口山</p>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存/确认</button>
                </div>
            </div>
        </div>
    </div>
    <!--
    <div class="container-fuild">
        <button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal" data-whatever="操作状态">保存</button>
        <button type="button" class="btn btn-success " onclick="showMsg()" data-whatever="操作状态">JS调用</button>
        
    </div>
    !-->

    </html>
    <script>
        function changeTab(contentId) {

            $('#' + contentId).tab('show')
        }
        /*事件
        show.bs.tab    选择新标签显示之前触发
        shown.bs.tab   选择新标签之后触发
        hide.bs.tab    标签隐藏时触发
        hidden.bs.tab  标签异常后触发
        */
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            var target = e.target
            var relatedTarget = e.relatedTarget

            $('#t1').text('关闭选项卡:' + target + '\r\n 当前选项卡:' + relatedTarget);
            $('#myModal').modal({ keyboard: true })
        })

        $('#myModal').on('show.bs.modal', function (event) {
            // var button = $(event.relatedTarget)  Button that triggered the modal
            // var recipient = button.data('whatever')  Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            var warnningMsg = $('#t1').text();

            modal.find('.modal-title').text('提示： ')
            $('#showmsg').text(warnningMsg)
            modal.find('.modal-body input').val(warnningMsg)
        })
    </script>